<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘本展示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">全部绘本</el-menu-item>
            <el-submenu index="2">
                <template slot="title">绘本分类</template>
                <el-menu-item index="2-1">神话</el-menu-item>
                <el-menu-item index="2-2">科学</el-menu-item>
                <el-menu-item index="2-3">童话</el-menu-item>
                <el-menu-item index="2-4">自然</el-menu-item>
                <el-menu-item index="2-5">游戏</el-menu-item>
                <el-menu-item index="2-6">美食</el-menu-item>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
        <!--走马灯-->
        <template>
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="img in imgs">
                    <img style="width: 100%; height: 100%;" :src="img">
                </el-carousel-item>
            </el-carousel>
        </template>

        <!--绘本展示区-->

        <div class="row">
            <template v-for="book in books">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="imgs/showimgs/book.jpg" width="200" height="213">
                        <div class="caption">
                            绘本数量:{{book.copy}}
                        </div>
                        <div class="caption">
                            租借价格:{{book.price}}
                        </div>
                        <div class="caption">
                            购买价格:{{book.price}}
                        </div>
                        <div class="caption">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-button type="primary" @click="rent()">租借</el-button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <el-button type="success" @click="buy()">购买</el-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    </div>

    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    books:[],
                    imgs: [
                        'imgs/showimgs/shenhua.jpg',
                        'imgs/showimgs/kexue.jpg',
                        'imgs/showimgs/tonghua.jpg',
                        'imgs/showimgs/ziran.jpg',
                        'imgs/showimgs/youxi.jpg',
                        'imgs/showimgs/meishi.jpg',
                        ],
                    activeIndex2: '1'
                };
            },
            mounted: function () {
                var _this = this;
                axios.get('../api/book/findAll')
                    .then(function (response) {
                        _this.books = response.data.results;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            methods: {
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                rent:function (){
                    var _this = this;
                    axios.get('../')
                        .then(function (response) {
                            _this.books = response.data.results;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                buy:function (){
                    var _this = this;
                    axios.get('../api/alipay/pay')
                        .then(function (response) {
                            console.log(true);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

            }
        })
    </script>
</body>
</html>